<template>
  <div>
    <el-row>
        <el-col :span="6">
          <el-tag type="danger" effect="dark" round style="width: 100px;height: 50px;font-size: 20px;">{{ pigfile.earNumber }}</el-tag>
        </el-col>
    </el-row>

    <el-row style="margin-top: 10px;margin-bottom: 20px;">
        <el-col :span="6">
          <el-text type="primary" style="font-size: 16px;"><el-icon><DeleteLocation /></el-icon>
            {{ pigfile.bedroomName }}-{{ pigfile.fieldName }}
          </el-text>
        </el-col>
        <el-col :span="6">
          <el-text type="primary" style="font-size: 16px;">
            <el-icon><Aim /></el-icon>电子耳号：{{ pigfile.electronicearlabel }}
          </el-text>
        </el-col>
    </el-row>

    <!--品种 性别 父耳号 母耳号 出生日期 出生重-->
    <el-row>
        <el-col :span="6">
            <span>&ensp;&ensp;&ensp;&ensp;品种：{{ pigfile.varietiesName }}</span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;&ensp;&ensp;
              性别：<el-tag type="primary" v-if="pigfile.gender==1">公</el-tag>
                  <el-tag type="danger" v-else-if="pigfile.gender==2">母</el-tag>
            </span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;父耳号：{{ pigfile.fatherEarNumber }}</span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;母耳号：{{ pigfile.motherEarNumber }}</span>
        </el-col>
        <el-col :span="6">
            <span>出生日期：{{ pigfile.birthDate }}</span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;出生重：{{ pigfile.birthWeight }}</span>
        </el-col>
    </el-row>

    <!--出生场地 断奶日龄 断奶重 日龄 月龄 同胎数-->
    <el-row>
        <el-col :span="6">
            <span>出生场地：{{ pigfile.birthplace }}</span>
        </el-col>
        <el-col :span="6">
            <span>断奶日龄：{{  }}</span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;断奶重：{{  }}</span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;&ensp;&ensp;日龄：{{  }}</span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;&ensp;&ensp;月龄：{{  }}</span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;同胎数：{{  }}</span>
        </el-col>
    </el-row>

    <!--生产等级 基因等级 销售等级 繁殖方式-->
    <el-row>
        <el-col :span="6">
            <span>生产等级：
              <el-text class="mx-1" v-if="pigfile.productiongrade==1">后备级</el-text>
              <el-text class="mx-1" v-else-if="pigfile.productiongrade==2">核心级</el-text>
              <el-text class="mx-1" v-else-if="pigfile.productiongrade==3">生产级</el-text>
              <el-text class="mx-1" v-else-if="pigfile.productiongrade==4">未定级</el-text>
            </span>
        </el-col>
        <el-col :span="6">
            <span>基因等级：
              <el-text class="mx-1" v-if="pigfile.geneticlevelEnums==1">后备级</el-text>
              <el-text class="mx-1" v-else-if="pigfile.geneticlevelEnums==2">核心级</el-text>
              <el-text class="mx-1" v-else-if="pigfile.geneticlevelEnums==3">生产级</el-text>
              <el-text class="mx-1" v-else-if="pigfile.geneticlevelEnums==4">未定级</el-text>
            </span>
        </el-col>
        <el-col :span="6">
            <span>销售等级：{{  }}</span>
        </el-col>
        <el-col :span="6">
            <span>繁殖方式：{{  }}</span>
        </el-col>
    </el-row>

    <!--当前胎次 已产胎次 配种序号-->
    <el-row>
        <el-col :span="6">
            <span>当前胎次：{{  }}</span>
        </el-col>
        <el-col :span="6">
            <span>已产胎次：{{  }}</span>
        </el-col>
        <el-col :span="6">
            <span>配种序号：{{  }}</span>
        </el-col>
    </el-row>

    <!--创建人 修改人 创建时间 修改时间-->
    <el-row>
        <el-col :span="6">
            <span>&ensp;&ensp;创建人：{{ pigfile.createdOwner }}</span>
        </el-col>
        <el-col :span="6">
            <span>&ensp;&ensp;修改人：{{ pigfile.updateOwner }}</span>
        </el-col>
        <el-col :span="6">
            <span>创建时间：{{ pigfile.createdTime }}</span>
        </el-col>
        <el-col :span="6">
            <span>修改时间：{{ pigfile.updateTime }}</span>
        </el-col>
    </el-row>
  </div>

  <div style="margin-top: 20px;text-align: center;">
    <el-radio-group v-model="radio1" size="large" >
      <el-radio-button label="系谱" value="系谱" @click="handlefather(pigfile.fatherEarNumber),handlemother(pigfile.motherEarNumber)" />
      <el-radio-button label="生产记录" value="生产记录" />
      <el-radio-button label="转舍记录" value="转舍记录" />
      <el-radio-button label="健康记录" value="健康记录" />
      <el-radio-button label="档案卡" value="档案卡" />
    </el-radio-group>
  </div>
  <div style="margin-top: 30px;width: 920px;height: 100%;">
    <el-row type="flex" justify="" style="margin-top: 200px;"  v-if="radio1=='系谱'">
        <!--第一头-->
        <el-col :span="6">
          <div class="id1" align="center" style="background-color:dodgerblue;color:white;width: 100px;border-radius: 7px;margin-top:150px;height: 25px;">
            {{ pigfile.earNumber }}
          </div>
          <!-- 线条（水平） -->
          <div class="line horizontal" style="left: 100px; top: 160px; width: 50px;"></div>
          <!-- 线条（垂直） -->
          <div class="line vertical" style="left: 150px; top: 20px; height: 330px;"></div>
        </el-col>

        <el-col :span="6">
          <!-- 父 -->
          <div class="line horizontal" style="left: 150px; top: 20px; width: 80px;"></div>
          <div v-if="pigfile.fatherEarNumber==''" align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: 10px;height: 25px;">无
          </div>
          <div v-else align="center" style="background-color:#409EFF;color:white;width: 100px;border-radius: 7px;margin-top: 10px;height: 25px;">{{pigfile.fatherEarNumber}}
          </div>
          <div class="line horizontal" style="left: 328px; top: 20px; width: 50px;"></div>
          <div class="line vertical" style="left: 378px; top: -70px; height: 166px;"></div>

          <!-- 母 -->
          <div class="line horizontal" style="left: 150px; top: 350px; width: 80px;"></div>
          <div class="id3" align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 300px;height: 25px;">
            <span v-if="pigfile.motherEarNumber==''">无</span>
            <span v-else>{{ pigfile.motherEarNumber }}</span>
          </div>
          <div class="line horizontal" style="left: 328px; top: 350px; width: 50px;"></div>
          <div class="line vertical" style="left: 378px; top: 260px; height: 168px;"></div>
        </el-col>


        <el-col :span="6">
          <!-- 祖父 -->
          <div class="line horizontal" style="left: 378px; top: -70px; width: 80px;"></div>
          <div v-if="father.fatherEarNumber==''" align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: -80px;height: 25px;">
            无
          </div>
          <div v-else align="center" style="background-color:dodgerblue;color:white;width: 100px;border-radius: 7px;margin-top: -80px;height: 25px;">
            {{father.fatherEarNumber}}
          </div>

          <!-- 祖母 -->
          <div class="line horizontal" style="left: 378px; top: 95px; width: 80px;"></div>
          <div align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 140px;height: 25px;">
            <span v-if="mother.motherEarNumber==''" >无</span>
            <span v-else>{{ mother.motherEarNumber }}</span>
          </div>

          <!-- 再次的祖父（这里可能有重复，根据你的数据结构调整）-->
          <div class="line horizontal" style="left: 378px; top: 260px; width: 80px;"></div>
          <div v-if="father.fatherEarNumber==''" align="center" style="background-color:gainsboro;color:white;width: 100px;border-radius: 7px;margin-top: 140px;height: 25px;">
             无
          </div>
          <div v-else align="center" style="background-color:dodgerblue;color:white;width: 100px;border-radius: 7px;margin-top: 140px;height: 25px;">
            {{father.fatherEarNumber}}
          </div>

          <!-- 再次的祖母 -->
          <div class="line horizontal" style="left: 378px; top: 426px; width: 80px;"></div>
          <div align="center" style="background-color:red;color:white;width: 100px;border-radius: 7px;margin-top: 140px;height: 25px;">
            <span v-if="mother.motherEarNumber==''" >无</span>
            <span v-else>{{ mother.motherEarNumber }}</span>
          </div>
        </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

//创建路由响应实例
const route=useRoute()

//获取猪只详情档案
const pigfile=ref({})
const handleDetailPigfile=()=>{
  axios.post(apiBedinUrl+'/api/Basics/DetailsPigfile',{
    basicInforId:route.query.basicId
  }).then(res=>{
    pigfile.value=res.data.data
  })
}

//单选
const radio1 = ref('')

//获取父耳号
const father=ref({})
const handlefather=(Number:any)=>{
  axios.get(apiBedinUrl+'/api/Basics/GetFatherearNumber',
  {
    params:{
      EarNumber:Number
    }
  }).then(res=>{
    console.log(res.data.data)
    father.value=res.data.data
  })
}

//获取母耳号
const mother=ref({})
const handlemother=(Number:any)=>{
  axios.get(apiBedinUrl+'/api/Basics/GetMotherearNumber',
  {
    params:{
      EarNumber:Number
    }
  }).then(res=>{
    console.log(res.data.data)
    mother.value=res.data.data
  })
}

//创建生命周期函数钩
onMounted(()=>{
  handleDetailPigfile()
})

</script>

<!-- 全局线条样式 -->
<style scoped>
.box {
  width: 100px;
  height: 25px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.line {
  position: absolute;
  background-color: black;
}
.line.vertical {
  width: 2px;
}
.line.horizontal {
  height: 2px;
}
</style>
